<template>
    <div>
        <span>Message: {{ msg }}</span>
    </div>
    <div>
        <p>Using text interpolation: {{ rawHtml }}</p>
        <p>Using v-html directive: <span v-html="rawHtml"></span></p>
    </div>
    <div v-bind:id="dynamicId">dynamicId</div>
    <!-- 同名简写 -->
    <div :id="dynamicId">dynamicId2</div>
    <div>
        <!-- 布尔型 Attribute -->
        <button :disabled="isButtonDisabled">Button</button>
    </div>
    <div v-bind="objectOfAttrs">objectOfAttrs</div>
    <!-- v-if 指令会基于表达式 seen 的值的真假来移除/插入该 <p> 元素。 -->
    <p v-if="seen">Now you see me</p>
    <div>
        <a v-bind:href="url">百度</a>
    </div>
    <div>
        <!-- 另一个例子是 v-on 指令，它将监听 DOM 事件 -->
        <a v-on:click="doSomething">doSomething</a>
    </div>
    <p>
        <!-- 这里的 attributeName 会作为一个 JavaScript 表达式被动态执行，计算得到的值会被用作最终的参数。
         举例来说，如果你的组件实例有一个数据属性 attributeName，其值为 "href"，那么这个绑定就等价于 v-bind:href。 -->
        <a v-bind:[attributeName]="url">百度 动态参数</a>
    </p>
    <p>
        <!-- 绑定到动态的事件名称 -->
        <a v-on:[eventName]="doSomething"> ... </a>
    </p>
</template>
<script>

export default {
    name: 'template1',
    data() {
        return {
            msg: 'Hello World!',
            rawHtml: '<span style="color:red">This should be red</span>',
            dynamicId: 'dynamicId',
            isButtonDisabled: true,
            objectOfAttrs : {
                id: 'container',
                class: 'wrapper',
                style: 'background-color:green'
                },
            seen: true,
            url: 'https://www.baidu.com',
            attributeName: 'href',
            eventName: 'click'
        }
    },
    methods: {
        doSomething () {
            console.log('doSomething')
        }
    }
}
</script>